<!-- components/ui/RecommendedCard.vue -->
<template>
    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center space-x-3 hover:bg-blue-50 transition-colors cursor-pointer">
      <div class="w-16 h-16 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0">
        <img 
          :src="attraction.image" 
          :alt="attraction.name"
          class="w-full h-full object-cover"
        />
      </div>
      <div>
        <h4 class="font-medium">{{ attraction.name }}</h4>
        <div class="flex items-center">
          <div class="text-yellow-400 text-xs mr-1">
            <font-awesome-icon 
              v-for="n in 5"
              :key="n"
              :icon="n <= attraction.rating ? 'star' : ['far', 'star']"
            />
          </div>
          <span class="text-gray-500 text-xs">({{ attraction.reviews }})</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  defineProps({
    attraction: {
      type: Object,
      required: true,
      default: () => ({
        id: 0,
        name: '',
        rating: 0,
        reviews: 0,
        image: ''
      })
    }
  })
  </script>